<template>
  <div class="authority-info">
    <NavTitle title="成员权限" />
    <div class="right-form">
      <a-form ref="formRef" name="advanced_search" label-align="right" :model="formState">
        <a-row :gutter="24">
          <a-col :span="10">
            <a-form-item label="流水线名称" name="name" :rules="[{ required: true, message: '请选择流水线名称' }]">
              <a-input v-model:value="formState.name" placeholder="请输入流水线名称" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="10" :push="4">
            <a-form-item label="流水线ID">
              <a-input v-model:value="formState.id" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="10">
            <a-form-item label="所属项目" :rules="[{ required: true, message: '请输入' }]">
              <a-input v-model:value="formState.app" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="10" :push="4">
            <a-form-item label="所属环境" :rules="[{ required: true, message: '请输入' }]">
              <a-input v-model:value="formState.component" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="标签">
              <div class="tag-select">
                <a-select
                  v-model:value="formState.bq"
                  :options="selectListOptions"
                  placeholder="请选择标签"
                  allowClear
                  :fieldNames="{ label: 'name', value: 'uuid' }"
                >
                  <template #suffixIcon>
                    <CaretDownOutlined style="color: #6b84a5" />
                  </template>
                </a-select>
                <a-button type="text" style="color: #2590ff" @click="addTagOpen">
                  <template #icon> <PlusCircleOutlined /></template>
                  新建标签
                </a-button>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="10" :push="2">
            <a-form-item label="关联应用" :rules="[{ required: true, message: '请输入' }]">
              <a-input v-model:value="formState.hj" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="10">
            <a-form-item label="流水线分组">
              <a-select
                v-model:value="formState.fz"
                :options="selectListOptions"
                placeholder="请选择流水线分组"
                allowClear
                :fieldNames="{ label: 'name', value: 'uuid' }"
              >
                <template #suffixIcon>
                  <CaretDownOutlined style="color: #6b84a5" />
                </template>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <BasicModal ref="addTagModal" title="新建标签" width="400px" @emit-callback-fn="addCallbackFn($event)">
      <template #content>
        <a-form ref="formTagRef" label-align="right" :model="formTag">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="标签名称" name="name" :rules="[{ required: true, message: '请输入标签名称' }]">
                <a-input v-model:value="formTag.name" placeholder="请输入标签名称" allowClear />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="标签颜色" name="color" :rules="[{ required: true, message: '请选择标签颜色' }]">
                <div class="color-select">
                  <div
                    class="color-item"
                    v-for="(value, key, index) in Colors"
                    @click="formTag.color = key"
                    :key="index"
                    :style="{
                      backgroundColor: value,
                    }"
                  >
                    <CheckOutlined v-if="key == formTag.color" style="color: #fff" />
                  </div>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </template>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
import { CaretDownOutlined, PlusCircleOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { usePipelineStore } from '@/store/modules/pipeline';
import { storeToRefs } from 'pinia';
import { cloneDeep } from 'lodash';
const counterStore = usePipelineStore();
const { baseInfo } = storeToRefs(counterStore);

enum Colors {
  red = '#e6371c',
  volcano = '#F79217',
  orange = '#EEC000',
  green = '#00AB08',
  blue = '#2590FF',
  purple = '#925AD3',
  magenta = '#eb2f96',
  gray = '#999999',
}

const selectListOptions = ref([]);
const formRef = ref<any>(null);
const formState = reactive<any>({
  name: null,
  id: '',
  app: '',
  component: '',
  hj: '',
  bq: null,
  fz: null,
});

const formTag = reactive<any>({
  name: '',
  color: '',
});
const addTagModal = ref<any>(null);
const formTagRef = ref<any>(null);
const addTagOpen = () => {
  nextTick(() => {
    addTagModal.value.showModal();
  });
};
const addCallbackFn = async (obj: any) => {
  formTagRef.value
    .validate()
    .then(async () => {
      console.log(formTag);
    })
    .catch((err) => {
      console.log('error', err);
    });
};
</script>

<style scoped lang="less">
.authority-info {
  width: 100%;
}
.right-form {
  padding-top: 20px;
}
.tag-select {
  display: flex;
  flex-wrap: nowrap;
}

.color-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 12px;
  .color-item {
    width: 16px;
    height: 16px;
    margin-right: 16px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 16px;
  }
}
:deep(.ant-form-item-label) {
  text-align: right;
  width: 100px;
}
</style>
